<template>
  <div class="calendar-wrapper">
    <div class="calendar-sticky-area">
      <div class="calendar-con">
        <!--    <div class="action">-->
        <!--      <van-icon class="arrow-left" name="arrow-left" @click="deDate" />-->
        <!--      <span>{{yearMonth}}</span>-->
        <!--      <van-icon class="arrow" name="arrow" @click="addDate" />-->
        <!--    </div>-->
        <div class="min_con">
          <vue-hash-calendar :visible="true" ref="calendar" :defaultDatetime="nowday" :isShowWeekView="isShowWeekView" :themeColor="themeColor" :markType="'dot'" :weekStart="'monday'" @change="calendarChange" :markDate="markList" :disabled-week-view="true" :show-today-button="false" :is-show-time-picker="false" :pickerType="'date'">
            <b slot="day" slot-scope="scope" class="no-weight">{{
              scope.date.day
            }}</b>
          </vue-hash-calendar>
          <div class="line-turn" @click="isShowWeekView = !isShowWeekView">
            <van-icon v-show="isShowWeekView" class="arrowSZ" name="arrow-down" />
            <van-icon v-show="!isShowWeekView" class="arrowSZ" name="arrow-up" />
          </div>
        </div>
        <div class="gutter"></div>
        <div class="L-top">
          <div class="sort-option">
            <div class="select-wrapper" @click="sortclick">
              <span>{{ currentSort.label }}</span>
              <span class="arrow" :class="{ 'arrow-up': showSortOptions }">▼</span>
              <div class="sort-dropdown" v-show="showSortOptions">
                <div v-for="option in sortOptions" :key="option.value" class="sort-item" :class="{ active: currentSort.value === option.value }" @click="(event) => { handleSortChange(option); event.stopPropagation(); }">
                  {{ option.label }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="scrollable-content">
      <!--    <button style="display:block;margin:0 auto; width: 200px;height: 100px" @click="calFromNearToFar">由近到远</button>-->
      <div class="visitor-container">

        <div class="content-wrapper">
          <!-- 时间线区域 -->
          <div class="timeline">
            <div class="timeline-line"></div>
            <!-- 点位容器，与右侧内容项一一对应 -->
            <div v-for="(item, index) in records" :key="index" class="dot" :style="{ top: `${24 + index * 108}px` }">
            </div>
          </div>

          <!-- 内容列表 -->
          <div class="record-list">
            <div class="record-item" v-for="(item, index) in records" :key="index">
              <div class="record-content" @click="showCard(item, false)">
                <div class="company-info">
                  <div class="left">
                    <span class="company-dot meeting">
                      {{ item.object === 'bfpj' ? '协' : '拜' }}
                      <!-- 会 -->
                    </span>
                    <!--                <span class="company-dot" :class="[item.type === '会' ? 'meeting' : 'visit']">-->
                    <!--                  {{item.type}}-->
                    <!--                </span>-->
                    <span class="company-name" style="margin-left:5px">{{ item.sname }}</span>
                  </div>
                  <div class="distance">距我{{ item.distance }}m</div>
                </div>

                <div class="address">
                  <span>{{ item.saddress }}&nbsp;&nbsp;&nbsp;&nbsp;<span class="navigate" @click.stop.prevent="navigate(item)">导航</span></span>

                </div>
                <div class="record-actions">
                  <div style="font-size:14px;margin-left:30px;color: #484848;">
                    <span v-if="item.contact">负责人:{{ item.contact }}</span>
                  </div>

                  <div>
                    <button class="action-btn mr12" v-if="item.infotype == 'qiandao'" @click.stop="showCard(item, true)">签到</button>
                    <button class="action-btn mr12" v-if="item.infotype == 'qiantui'" @click.stop="showCard(item, false)">签退</button>
                    <!-- <button class="action-btn mr12" v-if="item.infotype == 'xiangqing'" @click="showCard(item, false)">详情</button> -->
                    <img src="@/assets/img_completed1.png" v-if="item.infotype == 'xiangqing'" style="width:40px">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="add-image">
      <img :src="require('@/assets/add.png')" @click="openNew" />
    </div>-->
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Toast } from 'vant'
import qs from 'qs'
import wx from 'weixin-js-sdk'
import * as dd from 'dingtalk-jsapi'
import YYEsnBridge from '@/assets/js/esn.min.js'

Vue.use(Icon).use(Toast)

export default {
  data () {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      dateChangeType: 'month',
      nowYear: '',
      nowMonth: '',
      nowday: new Date(),
      monthCont: 0,
      yearCont: 0,
      isShowWeekView: true,
      themeColor: {
        'bg-color': '#ffffff',
        'main-color': '#1677ff',
        'main-font-color': '#333333',
        'vice-font-color': '#666666'
      },
      now: '',
      currentDate: new Date(),
      markList: [{ color: 'red', date: [] }],
      reverse: true,
      yearMonth: '',
      refCustomers: [],
      changedDate: '',
      records: [
        // { type: '会', status: 'pending', time: '18m', name: '北京市海淀xxxxxxxx北京市海淀xxxxxxxx北京市海淀xxxxxxxx北京市海淀xxxxxxxx公司', address: '北京市海淀区知春路63号卫星大厦卫星大厦卫星大厦知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫' },
        // { type: '访', status: 'checkin', time: '18m', name: '北京市海淀xxxxxxxx北京市海淀xxxxxxxx北京市海淀xxxxxxxx', address: '北京市海淀区知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫星大厦' },
        // { type: '访', status: 'completed', time: '18m', name: '北京市海淀xxxxxxxx北京市海淀xxxxxxxx', address: '北京市海淀区知春路63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫星大厦63号卫星大厦卫星大厦卫星大厦' }
      ],
      // 其他已有数据...
      showSortOptions: false, // 控制下拉框显示
      currentSort: { value: 'distance_asc', label: '由近到远' }, // 当前选中的排序方式
      sortOptions: [
        { value: 'distance_asc', label: '从近到远' },
        { value: 'distance_desc', label: '由远到近' },
        { value: 'time_asc', label: '时间升序' },
        { value: 'time_desc', label: '时间降序' }
      ],

      center: []
    }
  },
  async created () {
    // await this.getlocation()
  },

  beforeDestroy () {
    // Cleanup event listeners jika ada
    const scrollContent = document.querySelector('.scrollable-content')
    if (scrollContent) {
      scrollContent.removeEventListener('scroll')
    }
    document.removeEventListener('click', this.handleClickOutside)
  },
  activated () {
    this.updateDotPositions()
    this.calendarChange(this.changedDate)
  },
  async mounted () {
    //console.log('before mounted')
    // if (this.center.length <= 0) {
    await this.getlocation()
    // }
    //console.log('this.center', this.center)
    //console.log('after mounted')
    const scrollContent = document.querySelector('.scrollable-content')
    if (scrollContent) {
      scrollContent.addEventListener('scroll', () => {

      })
    }
    document.addEventListener('click', this.handleClickOutside)
    // 监听内容变化，更新点的位置
    this.updateDotPositions()
    this.initDate()
    this.getMarkDate(this.now)
  },
  watch: {
    now: {
      handler (newVal) {
        //console.log('now......', newVal)
        this.yearMonth = newVal
        if (newVal) {
          this.fetchMonthMarkDate(newVal)
        }
      },
      immediate: true
    },
    isShowWeekView: {
      handler (newVal) {
        // 当日历视图改变时，等待 DOM 更新后重新计算位置
        this.$nextTick(() => {
          setTimeout(() => {
            this.updateDotPositions()
          }, 50) // 添加延时确保过渡动画完成
        })
      }
    },

    currentSort: {
      handler (newVal) {
        // //console.log("newVal***",newVal);
        // return

        let data = { bizcalendar_sort: newVal.value }
        this.fetchDayEvent(data, this.changedDate)
      }
    }

  },
  methods: {
    sortclick () {
      this.showSortOptions = !this.showSortOptions
      this.updateDotPositions()
    },
    showCard (item, isqd) { // isqd: 是否签到
      //console.log('showCard', item, isqd)
      if (isqd) {
        this.axios({
          method: 'post',
          url: '/api/scenario.getinfo.do',
          data: qs.stringify({
            // sobject: 'activity',
            sobject: item.object,
            cardid: item.id
          })
        }).then(res => {
          let scenario = res.data.scenario
          let lastActionIndex = scenario.scenarioInfo.length
          // 找到上一次执行最后一个未完成的
          for (let i = 0; i < scenario.scenarioInfo.length; i++) {
            if (!scenario.scenarioInfo[i].ended) {
              lastActionIndex = i - 1
              break
            }
          }
          let lastAction = scenario.scenarioInfo[lastActionIndex + 1]
          // action.toId, action.toBo, action.toPage, action.actionName, action.fields
          localStorage.setItem('scenarioData', JSON.stringify(scenario))
          this.$router.push({
            name: 'action',
            query: {
              scenarioId: scenario.scenarioId,
              actionId: lastAction.actionId,
              itemid: lastAction.toId,
              // headobject: 'activity',
              headobject: item.object,
              headid: item.id,
              idobject: lastAction.toBo,
              atype: lastAction.toPage,
              // stitle: lastAction.actionName,
              stitle: item.type,
              fields: lastAction.fields,
              canskip: lastAction.canskip,
              ended: false,
              // scenario: JSON.stringify(this.scenario),
              nowIndex: lastActionIndex + 1,
              lastActionIndex: lastActionIndex + 1,
              actionType: lastAction.actionType
            }
          })
        })
      } else {
        //console.log('item:', item)
        this.$router.push({
          name: 'card',
          query: {
            // stitle: this.title,
            stitle: item.type,
            itemid: item.id,
            // idobject: 'activity',
            idobject: item.object,
            isqd: false
          }
        })
      }
    },
    navigate (item) {
      this.$router.push({ name: 'bflxnavigate', query: { item: item, idobject: this.idobject } })
    },
    handleClickOutside (e) {
      this.updateDotPositions()
      const sortOption = this.$el.querySelector('.sort-option')
      if (sortOption && !sortOption.contains(e.target)) {
        this.showSortOptions = false
      }
    },
    handleSortChange (option) {
      this.currentSort = option
      this.showSortOptions = false

      /* //console.log('this.showSortOptions', this.showSortOptions)
      // 根据不同的排序选项调用不同的排序逻辑
      switch (option.value) {
        case 'distance_asc':
          this.calFromNearToFar()
          break
        case 'distance_desc':
          // 调用由远到近的排序
          this.calFromFarToNear()
          break
        case 'time_asc':
          // 调用时间升序排序
          // this.sortByTimeAsc()
          break
        case 'time_desc':
          // 调用时间降序排序
          // this.sortByTimeDesc()
          break
      } */
    },
    // 由远到近排序方法
    calFromFarToNear () {
      // 因为默认是由近到远, 先直接反转
      this.records.reverse()
      this.updateDotPositions()
      // 获取位置后调用排序逻辑
      // this.getlocation('farthest')

      // 逆序输出 calFromNearToFar
    },

    // 时间升序排序
    sortByTimeAsc () {
      let data = { bizcalendar_sort: 'time_asc' }
      this.fetchDayEvent(data, this.changedDate)
    },

    // 时间降序排序
    sortByTimeDesc () {
      let data = { bizcalendar_sort: 'time_desc' }
      this.fetchDayEvent(data, this.changedDate)
    },

    handleViewToggle () {
      this.isShowWeekView = !this.isShowWeekView
      this.$nextTick(() => {
        const calendarArea = document.querySelector('.calendar-sticky-area')
        if (calendarArea) {
          calendarArea.scrollIntoView({ behavior: 'smooth' })
        }
      })
    },
    updateDotPositions () {
      // 使用 ResizeObserver 监听内容高度变化
      const observer = new ResizeObserver(() => {
        this.$nextTick(() => {
          const items = document.querySelectorAll('.record-item')
          const dots = document.querySelectorAll('.dot')

          let accumulatedHeight = 24 // 初始偏移

          items.forEach((item, index) => {
            if (dots[index]) {
              if (index == 0) {
                // //console.log('index', index)
                dots[index].style.top = '10px'
              } else {
                // 根据实际内容高度动态设置点的位置
                dots[index].style.top = `${accumulatedHeight}px`
              }
              accumulatedHeight += item.offsetHeight
            }
          })
        })
      })

      // 观察记录列表的变化
      const recordList = this.$el.querySelector('.record-list')
      if (recordList) {
        observer.observe(recordList)
      }

      // 组件销毁时清理
      this.$once('hook:beforeDestroy', () => {
        observer.disconnect()
      })
    },
    getDotClass (status) {
      return {
        'done': status === 'done',
        'current': status === 'current',
        'pending': status === 'pending'
      }
    },
    async calFromNearToFar () {
      //console.log('calFromNearToFar start')
      // this.getlocation()
      this.sort(this.center[1], this.center[0], 'calFromNearToFar')
      this.updateDotPositions()
      //console.log('calFromNearToFar end')

      // Toast('xxxx')
      // 获取地址后 会保存当前的经纬度, 之后调用后台逻辑 判断远近
    },
    // 拿到当前的经纬度,传入后台排序
    async sort (latitude, longitude, type) {
      //console.log('sort latitude, longitude', latitude, longitude, type)
      let data = {}
      data['bizcalendar_sort'] = this.currentSort.value
      data['bizcalendar_latitude'] = latitude
      data['bizcalendar_longitude'] = longitude
      this.fetchDayEvent(data, this.changedDate)
    },
    getlocation () {
      return new Promise((resolve, reject) => {
        //console.log('getlocation start')
        let ua = window.navigator.userAgent.toLowerCase()
        let logintype = 'wechat'
        let tourl = window.location.href
        let clttype = 'android'
        if (ua.indexOf('iphone') !== -1) {
          clttype = 'ios'
        }
        // if (ua.indexOf('wxwork') !== -1 || ua.indexOf('micromessenger') !== -1) {
        // } else {
        //   logintype = 'dingding'
        //   tourl = window.location.protocol + '//' + window.location.host + '/vue-common/dist/main'
        // }

        if (ua.indexOf('wxwork') !== -1) {
          logintype = 'wxwork'
        } else if (ua.indexOf('dingtalk') !== -1) {
          logintype = 'dingding'
          // tourl = window.location.protocol + '//' + window.location.host + '/vue-common/dist/main'
        } else if (ua.indexOf('micromessenger') !== -1) {
          logintype = 'wechat'
        } else if (ua.indexOf('tenantid') !== -1) {
          // 友空间
          logintype = 'ykj'
        } else {
          logintype = 'browser'
        }
        if (logintype === 'browser') {
          Toast('请在钉钉或微信端登录!')
          // TODO remove
          // this.$router.go(-1)
          this.center = [116.417913, 40.069559]
        }

        let _this = this
        let data = {
          url: tourl,
          type: logintype,
          clttype: clttype
        }
        let url = '/api/' + this.idobject + '.getlocation.do'
        this.axios({
          method: 'post',
          url: url,
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === '1' && res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            Toast(res.data.des)
            this.loginout()
          } else {
            let data = res.data
            if (logintype === 'wechat' || logintype === 'wxwork') {
              wx.config({
                beta: true,
                debug: false,
                appId: data.appId,
                timestamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: [
                  'getLocation'
                ]
              })
              wx.ready(function () {
                wx.getLocation({
                  isHighAccuracy: true,
                  type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'

                  success: function (res) {
                    var latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
                    _this.center[0] = res.longitude
                    _this.center[1] = res.latitude

                    _this.sort(latitude, longitude, 'wx')
                    //console.log('wx success: ', res)
                  },
                  fail: function (err) {
                    alert('微信定位失败，请检查定位是否已经打开!')
                    //console.log('wx fail: ', err)
                  }
                })
              })
            } else if (logintype === 'dingding') {
              dd.config({
                agentId: data.agentid,
                corpId: data.appId,
                timeStamp: data.timestamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                type: 0,
                jsApiList: [
                  'device.geolocation.get'
                ]
              })
              dd.error(function (error) {
                Toast('dd error: ' + JSON.stringify(error))
              })
              dd.ready(function () {
                dd.device.geolocation.get({
                  targetAccuracy: 200,
                  coordinate: 1,
                  withReGeocode: false,
                  useCache: true,
                  onSuccess: function (res) {
                    //console.log('this.center  res', res)
                    var latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
                    _this.center = [res.longitude, res.latitude]
                    // _this.center[0] = res.longitude
                    // _this.center[1] = res.latitude
                    _this.sort(latitude, longitude, 'dd')
                    resolve()
                  },
                  onfail: function (err) {
                    alert('定位失败，请检查定位是否已经打开!')
                    //console.log(JSON.stringify(err))
                  }
                })
              })
            } else if (logintype === 'ykj') {
              YYEsnBridge.ready(function () {
                YYEsnBridge.do('getLocationInfo', {
                  agentId: data.agentid,
                  timeStamp: data.timestamp,
                  signature: data.signature,
                  'success': function (res) {
                    let longitude = res.longitude
                    let latitude = res.latitude
                    _this.sort(latitude, longitude, 'YYEsnBridge')
                  },
                  'fail': function (err) {
                    alert('调用失败,请检查定位是否已经打开!' + JSON.stringify(err))
                    //console.log(JSON.stringify(err))
                  },
                  'complete': function (res) {
                    // alert('调用完成后执行');
                    //console.log('调用完毕:' + JSON.stringify(res))
                  }
                })
              })
            }
          }
        }).catch(function (error) {
          reject(error)
        })
      })
    },
    openNew1 () {
      this.$router.push({
        name: 'plannew',
        query: { stitle: '添加计划', idobject: 'jhgl', idtemplate: this.idtemplate, routetype: '2c9a2d9291db5a1f0191dea23b4d00ec', activeTab: '2c9a2d9291db5a1f0191de90efd70082' }
      })
    },
    openNew () {
      this.$router.push({
        name: 'planscenario',
        query: { stitle: '场景', idtemplate: this.idtemplate }
      })
    },
    goSolicitation () {
      this.$router.push({ name: 'solicitation' })
    },
    // handleDayClick(date) {
    //   //console.log('date',date);
    //   const event = { date, isToggled: true }; // 创建新的打卡事件
    //   this.events.push(event); // 添加到事件列表中
    // },
    addDate () {
      // if (this.dateSZType) {
      //   return
      // }
      if (this.dateChangeType === 'month') {
        this.adMonth()
      } else if (this.dateChangeType === 'year') {
        this.adYear()
      }
    },
    deDate () {
      // if (this.dateSZType) {
      //   return
      // }
      //console.log('aaa')
      if (this.dateChangeType === 'month') {
        this.deMonth()
      } else if (this.dateChangeType === 'year') {
        this.deYear()
      }
    },
    // 当前月上一个月
    deMonth () {
      this.monthCont--
      // this.month = this.month + this.monthCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    // 当前月下一个月
    adMonth () {
      this.monthCont++
      // this.month = this.month + this.monthCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    // 当前年上一个年
    deYear () {
      this.yearCont--
      // this.year = this.year + this.yearCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    // 当前年下一个年
    adYear () {
      this.yearCont++
      // this.year = this.year + this.yearCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    dateTypeChange (val) {
      this.dateChangeType = val
      // this.monthCont = 0
    },
    // 获取当前月份标记日期
    getMarkDate (val) {
      //console.log('markdate', val)
      // this.markList[1].date = ['2022/09/11', '2022/09/12']
      //console.log('day', this.markList[0].date)
      // 通过修改this.markList[0].date来实现切换月份时获取对应的标记日期，格式为['2022/09/11','2022/09/12']之类
    },
    // 回到今天
    backToday () {
      this.$refs.calendar.today()
    },
    // 显示当前几月
    initDate () {
      
      this.now =
        this.$refs.calendar.checkedDate.year +
        '年' +
        (this.$refs.calendar.checkedDate.month + 1) +
        '月'
      this.nowYear = this.$refs.calendar.checkedDate.year + '年'
      this.nowMonth = this.$refs.calendar.checkedDate.month + 1 + '月'
      //console.log('this.now', this.now)
    },
    // 日期变换
    calendarChange (date) {
      // this.getlocation()
      //console.log('calendarChange')
      //console.log('date', date)
      // const event = { date, isToggled: true } // 创建新的打卡事件
      // this.events.push(event) // 添加到事件列表中
      this.changedDate = date
      // this.currentSort = this.sortOptions[0]
      this.initDate()
      // 获取当前的经纬度并 添加事件
      // this.fetchDayEvent({}, date)
      this.sort(this.center[1], this.center[0], 'calendarChange')
    },
    fetchMonthMarkDate (yearMonth) {
      let data = {
        'bizcalendar_value': yearMonth,
        'bizcalendar_datetype': 'yearmonth'
      }
      this.axios({
        method: 'post',
        url: '/api/bizcalendar.fetchdata.do',
        data: qs.stringify(data)
      }).then(res => {
        this.isDisable = false
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          if (res.data.jsondata.marks && res.data.jsondata.marks.length > 0) {
            this.markList = res.data.jsondata.marks
          }
          //console.log('res', res)
        }
      }).catch(res => {
        this.isDisable = false
        this.reserror(res)
      })
    },

    fetchDayEvent (data, date) {
      if (!data) {
        data = {}
      }
      data['bizcalendar_value'] = `${date.getFullYear()}年${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日`
      data['bizcalendar_datetype'] = 'day'
      data['bizcalendar_longitude'] = this.center[0]
      data['bizcalendar_latitude'] = this.center[1]
      this.axios({
        method: 'post',
        url: '/api/bizcalendar.fetchdata.do',
        data: qs.stringify(data)
      }).then(res => {
        this.isDisable = false
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          this.updateDotPositions()
          if (res.data.jsondata.marks) {
            this.records = res.data.jsondata.marks
            //console.log('bizcalendar.fetchdata.do res', res)
            this.getScenario()
          } else {
            this.records = []
          }
        }
      }).catch(res => {
        this.isDisable = false
        this.reserror(res)
      })
    },
    getScenario () {
      for (let i = 0; i < this.records.length; i++) {
        let item = this.records[i]
        //console.log('getScenario', item)
        this.axios({
          method: 'post',
          url: '/api/scenario.getinfo.do',
          data: qs.stringify({
            // sobject: 'activity',
            sobject: item.object,
            cardid: item.id
          })
        }).then(res => {
          //console.log('scenario.getinfo.do res', res)
          if (res.data?.scenario) {
            let scenarios = res.data?.scenario?.scenarioInfo
            let endcount = 0
            for (let si = 0; si < scenarios?.length; si++) {
              if (scenarios[si].ended) {
                endcount++
              }
            }

            if (endcount == 0) {
              Vue.set(this.records[i], 'infotype', 'qiandao')
            } else if (endcount < scenarios.length) {
              Vue.set(this.records[i], 'infotype', 'qiantui')
            } else {
              Vue.set(this.records[i], 'infotype', 'xiangqing')
            }

            //console.log('infotype end', this.records)
          }
        }).catch(res => {
          this.isDisable = false
          this.reserror(res)
        })
      }
    }
  }
}
</script>
<style scoped lang="less">
.line-turn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrowSZ {
  width: 18px;
  height: 6px;
}

.action {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 8px;
  z-index: 2;
  display: flex;
  justify-content: center;
  // background-color: black;
}

.now {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}

.action span {
  display: inline-block;

  margin: 0 10px;
}

.arrow,
.arrow-left {
  line-height: 40px;
}

/*.arrow {*/
/*  width: 16px;*/
/*  height: 16px;*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  right: 100px;*/
/*  z-index: 2;*/
/*}*/
/*.arrow-left {*/
/*  width: 16px;*/
/*  height: 16px;*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 100px;*/
/*  z-index: 2;*/
/*}*/
/*.arrow-center {*/
/*  width: 100px;*/
/*  height: 16px;*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  left: 50%;*/
/*  margin-left: -50px;*/
/*  z-index: 2;*/
/*}*/
.min_con {
  width: 351px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 8px;
  position: relative;
  z-index: 2;
  padding: 12px;
  box-sizing: border-box;
  /*border-bottom: 1px solid #eee;*/
}

.gutter {
  height: 10px;
  background-color: #eee;
  /*border: 1px solid #eee*/
}

.hdzj_icon {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  width: 85px;
}

.eventtimeline {
  width: 351px;
  margin: 12px auto;
  /*background-color: lightyellow;*/
  /*border: 1px solid black;*/
  border-radius: 8px;
  position: relative;
  z-index: 2;
  padding: 12px;
  box-sizing: border-box;
}

.customer-list {
  list-style-type: none;
  padding: 0;
}

.customer-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  justify-content: space-between;
  padding: 10px 20px;
}

.customer-item img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  /* 将图片裁剪成圆形 */
  object-fit: cover;
  /* 保持图片内容不变形 */
  border: 1px solid #c1c3d5;
}

.customer-item div {
  width: 80%;
  text-overflow: ellipsis;
  /* 如果内容过长，显示省略号 */
}

.customer-item a {
  width: 50px;
  color: #5790df;
  text-align: right;
}

.customer-details {
  flex-grow: 1;
}

.customer-details .title {
  margin: 0;
  font-size: 16px;
  color: black;
}

.customer-details p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #666;
}

.customer-details a {
  width: 50px;
}

.delete-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  align-self: flex-start;
}

.input-group {
  margin-top: 15px;
  padding: 0 20px;
}

.input-group div {
  margin-top: 2px;
}

.input-group textarea {
  width: 100%;
  height: 120px;
  border: 1px solid #eee;
}

[class*="van-hairline"]::after {
  border: none;
}

.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}

.empty-state {
  text-align: center;
  padding: 50px 0;
  color: #999;
}

.empty-state svg {
  margin-bottom: 10px;
}

.empty-state p {
  font-size: 16px;
  color: #999;
}

.customline {
  display: flex;
  flex-direction: column;
}

.tldiv {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  padding: 15px;
  box-sizing: border-box;
  border: none;
}

.tldiv img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  /* 将图片裁剪成圆形 */
  object-fit: cover;
  /* 保持图片内容不变形 */
  border: 1px solid #c1c3d5;
}

.tldiv div {
  width: 80%;
  text-overflow: ellipsis;
  /* 如果内容过长，显示省略号 */
}

.tldiv a {
  width: 50px;
  color: #5790df;
  text-align: right;
}

.customline .tldbottom {
  display: flex;
  justify-content: flex-end;
  padding: 10px 15px;
  box-sizing: border-box;
}

.customline .tldbottom button {
  padding: 3px 10px;
  box-sizing: border-box;
  width: 56px;
  height: 23px;
  border-radius: 5px;
  background: #e35c5c;
  color: white;
  font-size: 14px;
  border: none;
}

.add-image {
  position: fixed;
  /* 固定位置 */
  right: 5px;
  /* 距离右边的距离 */
  bottom: 80px;
  /* 距离底部的距离 */
  z-index: 1000;
  /* 确保在页面上显示 */
}

.add-image img {
  width: 75px;
  /* 图片的宽度 */
  height: auto;
  /* 高度自动调整 */
  border-radius: 50%;
  /* 可选：将图片设置为圆形 */
}

.arrow {
  font-size: 12px;
  margin-left: 4px;
  color: #999;
}

.record-list {
  position: relative;
}

/*.record-item {*/
/*  display: flex;*/
/*  align-items: flex-start;*/
/*  background: white;*/
/*  padding: 16px 12px;*/
/*  margin-bottom: 1px;*/
/*}*/

.record-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  z-index: 1;
  background-color: #69a0ff;
}

.record-icon.meeting {
  background-color: #4b87f7;
}

.line {
  position: absolute;
  top: 22px;
  width: 1px;
  height: calc(100% + 1px);
  background-color: #e8e8e8;
}

.record-content {
  flex: 1;
  min-width: 0;
}

.company-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* 改为 flex-start，使子元素从顶部对齐 */
  margin-bottom: 12px;
}

.company-info .left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* 改为 flex-start，使子元素从顶部对齐 */
}

.company-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  padding-top: 5px;
  /* 添加顶部内边距，使其与 company-dot 顶部对齐 */
  word-break: break-all;
  /* 允许在任意字符间换行 */
}

.distance {
  font-size: 14px;
  color: #999;
  min-width: 100px;
  text-align: right;
  padding-top: 8px;
  /* 添加顶部内边距，使其与 company-dot 顶部对齐 */
  flex-shrink: 0;
  /* 防止缩小 */
}

/*.navigate {*/
/*  font-size: 14px;*/
/*  line-height: 14px;*/
/*  color: #4B87F7;*/
/*  margin-left: 6px;*/
/*  !*flex-shrink: 0;*!*/
/*}*/

.action-btn:hover {
  background-color: #3b77e7;
}

.completed {
  color: #999;
  font-size: 13px;
}

.calendar-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.calendar-sticky-area {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Untuk smooth scrolling di iOS */
}

/* Styling yang sudah ada tetap dipertahankan */
.calendar-con {
  margin-top: 12px;
}

/**
  timeline
   */
.visitor-container {
  box-sizing: border-box;
  padding: 12px;
  padding-top: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.L-top {
  display: flex;
  justify-content: flex-end;
}

.content-wrapper {
  position: relative;
  display: flex;
  // margin-top: 16px;
}

/* 时间线样式 */
.timeline {
  position: relative;
  width: 30px;
  flex-shrink: 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #e8e8e8;
}

/* 时间线上的点 */
.dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  background: #dbdbdb;
  border-radius: 50%;
  z-index: 2;
}

/* 记录列表样式 */
.record-list {
  flex: 1;
  /*margin-left: 12px;*/
}

.record-item {
  padding: 13px 0;
  min-height: 76px;
  /* 确保每个项目有最小高度 */
  border-bottom: 1px solid #f2f2f2;
}

.record-item:first-child {
  padding: 0;
  padding-bottom: 13px;
  box-sizing: border-box;
}

.record-content {
  position: relative;
}

/* 公司信息样式 */
.company-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.left {
  display: flex;
  align-items: center;
}

.company-dot {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  flex-shrink: 0;
  /* 防止缩小 */

  &.meeting {
    background-color: #69a0ff;
  }

  &.visit {
    background-color: #69a0ff;
  }
}

.company-name {
  font-size: 16px;
  color: #000;
}

/* 地址信息样式 */
.address {
  /*display: flex;*/
  align-items: flex-start;
  font-size: 14px;
  line-height: 24px;
  color: #484848;
  margin-left: 30px;
  margin-bottom: 5px;

  span:first-child {
    /*flex: 1;*/
    /*margin-right: 8px;*/
  }

  .navigate {
    color: #015fe2;
    cursor: pointer;
    /*line-height: 24px;*/
  }
}

/* 操作按钮样式 */
.record-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-btn {
  width: 82px;
  height: 32px;
  border-radius: 5px;
  padding: 5px 14px;
  background-color: #5790df;
  color: white;
  border: none;
  font-size: 13px;
  cursor: pointer;

  &.mr12 {
    margin-right: 12px;
  }

  &:hover {
    background-color: #3b77e7;
  }
}

.completed {
  color: #999;
  font-size: 13px;
}

.sort-option {
  font-family: "Microsoft YaHei";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #000;
  position: relative;

  .select-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px; // 调整内边距
    background: white; // 设置背景色
    /*border: 1px solid #ddd;  // 添加边框*/
    border-radius: 4px; // 添加圆角
    user-select: none;
  }

  .arrow {
    font-size: 12px;
    margin-left: 4px;
    color: #999;
    transition: transform 0.3s;

    &.arrow-up {
      transform: rotate(180deg);
    }
  }

  .sort-dropdown {
    position: absolute;
    top: calc(100% + 4px); // 与选择框之间的距离
    left: 0; // 确保水平对齐
    background: white;
    border-radius: 4px;
    border: 1px solid #ddd; // 同样的边框
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); // 如果需要阴影
    z-index: 100;
    min-width: 100%;
    overflow: hidden; // 确保圆角内的内容不会超出
  }

  .sort-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f5f5;
    }

    &.active {
      color: #5790df;
      font-weight: 500;
    }
  }
}
</style>
